各位看官大家好,台嘎後,今天要來還週末債了
今日中部風光明媚,不過聽說好天氣只會持續到週四,大家要把握機會外出踏青呀
上一回我們講到了可以透過給予 api 特定的參數(路線),來決定要取回27218筆資料中我們想要的那一小部分就好
但是現在我們的**「台中全公車路線」跟「(被點選的)公車路線到站時間顯示」**是兩頁不同的 .html
若去 Github 上看這個專案的 code
就會發現其實我把**「每筆路線自己的中文、英文名稱都寫進 href 網址上了」**
<a href="bus-way.html?Zh_tw=${items[i].SubRoutes[0].SubRouteName.Zh_tw}&En=${items[i].SubRoutes[0].SubRouteName.En}" class="busLink">
假使我們點選了 300號路線,那我們的網址後段就會是 bus-way.html?Zh_tw=300&En=300
這時候!
?
後方的參數取下來!var helper = {
getParameterByName: function (name, url) {
var regex, results;
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, '\\$&');
regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)', 'i');
results = regex.exec(url);
if (!results) {
return null;
}
if (!results[2]) {
return '';
}
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
};
let roadLine = helper.getParameterByName("Zh_tw"); //取得 路線中文名稱
// 若是要用英文路線我們就改取("En")即可
這麼一來,我們就可以在第二頁使用 roadLine
變數來知道目前應該要去拉哪一條路線的到站資料回來嚕!
其實各大 Framework 或是 Library 都有類似 router
的方法來處理類似的情況
就可以省去寫兩頁 .html 還要彼此互傳參數、變數的問題了
欸?你問我為什麼不用?
因為 router
大佬它跟我不熟啊
對不起,之後我會好好研究的..真的
- Jason 勇者Jason和前端之鑰
- Clover 用Vue與firebase開發訂便當系統實錄
- aflect 我的UI/UX奮鬥屎
- GG 一隻巨大的UI/UX菜鳥
- Jimmy ES666
- R-yin 菜鳥前端奮鬥史(欸?
我是小菜鳥阿陰,我們下次見!